﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>
    <br />
    <br />

    <h3 class="spliter">
        外部按钮操作checkbox选中
        <a class="rayui-btn btn-success externalAction" action="render">重新渲染所有控件</a>
        <a class="rayui-btn btn-primary externalAction1" action="toggle">切换所有状态</a>
    </h3>
    <div class="row row-aline">
        <label>外部操作</label>
        <div class="row-content">
            <input class="rayui-checkbox" id="actionBtn" type="checkbox" checked="checked" ray-event="actionBtn-chk" />
            <a class="rayui-btn btn-primary externalAction" action="check">选中</a>
            <a class="rayui-btn btn-primary externalAction" action="unCheck">取消选中</a>
            <a class="rayui-btn btn-primary externalAction" action="toggle">切换选中</a>
            <a class="rayui-btn btn-primary externalAction" action="click">模拟点击-触发事件</a>
        </div>
    </div>

    <h3 class="spliter">默认样式，返回true或false</h3>
    <div class="row row-aline">
        <label>默认样式</label>
        <div class="row-content">
            <input class="rayui-checkbox" type="checkbox" ray-title="选中" checked="checked" ray-event="chk1" />
            <input class="rayui-checkbox" type="checkbox" ray-title="不选中" />
            <input class="rayui-checkbox" type="checkbox" ray-title="禁止选择" disabled />
        </div>
    </div>
    <h3 class="spliter">outer样式，返回1或0</h3>
    <div class="row row-aline">
        <label>outer样式</label>
        <div class="row-content">
            <input class="rayui-checkbox" type="checkbox" skin="outer" ray-value="1" ray-title="选中" checked="checked" ray-event="chk2" />
            <input class="rayui-checkbox" type="checkbox" skin="outer" ray-title="不选中" />
            <input class="rayui-checkbox" type="checkbox" skin="outer" ray-title="禁止选择" disabled />
        </div>
    </div>
    <h3 class="spliter">bgcolor样式，返回on或off</h3>
    <div class="row row-aline">
        <label>bgcolor样式</label>
        <div class="row-content">
            <input class="rayui-checkbox" type="checkbox" skin="bgcolor" ray-value="on" ray-title="选中" checked="checked" ray-event="chk2" />
            <input class="rayui-checkbox" type="checkbox" skin="bgcolor" ray-title="不选中" />
            <input class="rayui-checkbox" type="checkbox" skin="bgcolor" ray-title="禁止选择" disabled />
        </div>
    </div>
    <h3 class="spliter">box样式，返回是或否</h3>
    <div class="row row-aline">
        <label>box样式</label>
        <div class="row-content">
            <input class="rayui-checkbox" type="checkbox" skin="box" ray-value="是|否" ray-title="选中" checked="checked" ray-event="chk2" />
            <input class="rayui-checkbox" type="checkbox" skin="box" ray-title="不选中" />
            <input class="rayui-checkbox" type="checkbox" skin="box" ray-title="禁止选择" disabled />
        </div>
    </div>


    <script>
        rayui.use(["checkbox", "layer"], function () {

            var chkbox = rayui.checkbox,
                layer = rayui.layer;

            chkbox.render();
            chkbox.on("check", function (obj) {
                //obj包含:event，elem，checked
                layer.msg("ray-event=" + obj.event + "的复选框状态：" + obj.checked, { time: 2000, shade: false });
            });

            $(".externalAction").click(function () {
                var action = $(this).attr("action");
                if (action === "render") {
                    chkbox[action]();
                    return;
                }
                chkbox[action]("#actionBtn");
            });
            $(".externalAction1").click(function () {
                chkbox.toggle($("body").find(".rayui-checkbox"));
            });

        })

    </script>

    <div class="card">
        disabled和readonly标记在功能上是一样的，唯一区别就是disabled的标签在form上传的时候无法上传
    </div>

    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：

属性：
skin：皮肤，可选：不填|outer|bgcolor|box
ray-title：显示内容
ray-value：选中非选中返回值，格式"true"、"1"、on"、"选中值|非选中值"，必须是选中值在前，中间用“|”分割;
ray-event：监听复选框的事件标记，配合on事件的container，可以实现容器内多个复选框的区分

方法：
on：function (event, callback, container)：监听指定容器内checkbox的event事件，配合ray-event可以实现容器内多个复选框的区分；
                event：现在只支持check事件
                callback：function(obj)：obj包含：
                                event: ray-event值,
                                elem: 原始input,
                                checked: ray-value数值，其中true|false为boolean类型；1|0为数值类型，其他均为字符串类型
                container：容器
off：function (event, container)：取消监听指定容器内checkbox的event事件。
render：function(container)：container可填可不填，填写可以实现渲染指定容器内的checkbox
check：选中复选框，不触发事件
unCheck：取消选中复选框，不触发事件
toggle：切换选中状态，不触发事件
click：模拟点击，触发事件

</pre>

</body>
</html>